
@view-border-color: rgba(0,0,0,.4);


.canvas {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 30px;

    .internet {
        position: relative;
        width: 20%;
        height: 1000px;
        .internet-icon {
            position: relative;
            //top: 10px;
            font-size: 62px;
            background-color: #FFF;
            width: 100%;
            > .internet-icon-point {
                position: absolute;
                top: -45px;
                z-index: 10;
            }
            > span {
               width: 28%;
            }
            &:before {
                content: '';
                position: absolute;
                //top:50px;
                border-top: 1px solid @view-border-color;
                left: 28%;
                width: 72%;
                z-index: 9;
            }
           .internet-line {
               position: absolute;
               top:50px;
               border-top: 1px solid @view-border-color;
               left: 28%;
               width: 72%;
           }
        }
    }
    .subnets {
        position: absolute;
        left : 20%;
        top: 0;
        width: 80%;
        height: 100%;
        .subnet {
            position: relative;
            border-width: 0px 0px 1px 1px;
            border-style: solid;
            border-color: @view-border-color;
            .subnet-title {
                position: relative;
                display: inline-block;
                text-align: center;
                width: 15%;
                .subnet-icon {
                    font-size: 38px;
                    position: absolute;
                    background-color: #FFF;
                    top: -20px;
                    padding: 0 10px;
                    left: 50px;
                    //margin: -10px 0px 0px 0px;
                }
            }
            .subnet-network {
                position: relative;
                display: inline-block;
                font-size: 16px;
                font-weight: 500;
                width: 20%;
            }

            .subnet-group {
                position: relative;
                display: inline-block;
                overflow: hidden;
                vertical-align: bottom;
                max-height: 100%;
                max-width: 57%;
                transition: all .5s ease;
                > ul{
                    font-size: 12px;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    line-height: 49px;
                    > li{
                        display: inline-block;
                        //border: 1px solid #d5d5d5;
                        margin: 0 15px;
                    }
                    .subnet-uhost {
                        padding: 0px 15px;
                        line-height: 38px;
                        > i {
                            font-size: 32px;
                            vertical-align: middle;
                        }
                    }
                }

                &.item-height {
                    height: 49px;
                    min-height: 49px;
                }
            }


        }
        .subnet-collapsed {
            display: inline-block;
            cursor: pointer;
            //font-size: 24px;
            span {
                margin-left: 5px;
            }
        }
        .subnet:first-child{
            //border-top-width: 1px;
        }

    }
}
